<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<link media='all' rel='stylesheet' type='text/css' href='css/main.css' />
		<link media='all' rel='stylesheet' type='text/css' href='css/colorPicker.css' />
	</head>
	<body>
		<div class = "wrapper">
			<div class = "main-header">
					<div class = "logo">
					</div>
					<span class="project-name"></span>
					<span class="release-name"></span>
					<div class="menu-btn">
						<a class="logout"> Logout </a>
						<a class = "account"> Account Settings </a>
						<a class = "project-revision-sel"> Switch Project | Release </a>
						<div class="clear"></div>	
					</div>
					<div class="clear"></div>	
			</div>
			<div class = "main-body">
				<div class = "workspace">
						<div class="workspace-header">
							<div class="backlog-header-col1 aggregate-col-header-light col-border-left"></div>
							<div class="backlog-header-col2 aggregate-col-header-light"><h2>Backlog</h2></div>
							<div class="backlog-header-col3 aggregate-col-header-light"></div>
							<div class="inprogress-header-col1 aggregate-col-header-light col-border-left"></div>
							<div class="inprogress-header-col2 aggregate-col-header-light"></div>
							<div class="inprogress-header-col3 aggregate-col-header-light"></div>
							<div class="inprogress-header-col4 aggregate-col-header-light"><h2>In-Progress</h2></div>
							<div class="inprogress-header-col5 aggregate-col-header-light"></div>
							<div class="inprogress-header-col6 aggregate-col-header-light"></div>
							<div class="inprogress-header-col7 aggregate-col-header-light"></div>
							<div class="completed-header aggregate-col-header-light col-border-left"><h2>Completed</h2></div>
							<div class="accepted-header aggregate-col-header-light col-border-left"><h2>Accepted</h2></div>
							<div class="publish-header aggregate-col-header-light col-border-left  col-border-right"><h2>Published</h2></div>
							<div class="clear"></div>			
						</div>
						<div class="workspace-content">
							<div class="sub-col" id="product">
									<div class="sub-col-header">
										<h3>Product</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col" id="release">
									<div class="sub-col-header">
										<h3>Release</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col" id="sprint">
									<div class="sub-col-header">
										<h3>Sprint</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
											
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="requirements">
									<div class="sub-col-header">
										<h3>Requirements</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="api-review">
									<div class="sub-col-header">
										<h3>Api Review</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="development">
									<div class="sub-col-header">
										<h3>Development</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="unit-test">
									<div class="sub-col-header">
										<h3>Unit Test</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="code-review">
									<div class="sub-col-header">
										<h3>Code Review</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="qa">
									<div class="sub-col-header">
										<h3>QA</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="documentation">
									<div class="sub-col-header">
										<h3>Documentation</h3>
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col" id="completed">
									<div class="sub-col-header">
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col darker" id="accepted">
									<div class="sub-col-header">
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="sub-col  col-border-right" id="published">
									<div class="sub-col-header">
									</div>
									<div class="sub-col-content">
										<div class = "plus-box" id = "plus2"> <div class = "plus"> + </div></div>
										<div class = "user-stories-wrap">
										</div>
									</div>
							</div>
							<div class="clear"></div>
						</div>
				</div>
				 <div class="push"></div>
			</div>
		</div>
			<div class = "main-footer"> <div>Brought to you by CS130</div></div>
			<div class = "story-detail-overlap">
				<div class = "content">
					<form id="userstory-detail">
						<div class="field-rows-wrap">
							<div class="field-row radio-row">
								<div class="radio-wrap">
									<input type="radio" name="story-type" value="story" checked />
									<label>User Story</label>
								</div>
								<div class="radio-wrap">
									<input type="radio" name="story-type" value="defect" />
									<label>Defect</label>
								</div>
								<div class="delete">
									Delete Sticky
								</div>
								<div class="clear"></div>
							</div>
							<div class="field-row title">
								<input type="text" name="title" value="Title" class="text-field" />
							</div>
							<div class="field-row description">
								<textarea name="description" class="text-field">Description</textarea>
							</div>
							<div id="release-select" class="field-row release">
								<!--label>Release:</label>
								<select name="release">
									<option value="1">alpha</option>
									<option value="2">beta</option>
								</select-->
							</div>
							<div class="field-row color">
								<label>Color:</label>
								<input id="stickyColorPicker" type="text" name="color1" value="#d7dfeb" />
							</div>
							<div class="field-row defect-wrap">
								<div class="field-row defect-priority">
									<label>Defect Priority:</label>
									<select name="defect-priority">
										<option value="1">1 - Showstopper</option>
										<option value="2">2 - High</option>
										<option value="3">3 - Medium</option>
										<option value="4">4 - Low</option>
										<option value="5">5 - Very low</option>
									</select>
								</div>
								<div class="field-row defect-state">
									<label>Defect State:</label>
									<select name="defect-state">
										<option value="1">Submitted</option>
										<option value="2">Open</option>
										<option value="3">Closed</option>
										<option value="4">Resolved</option>
										<option value="5">Junked</option>
										<option value="6">Verified</option>
										<option value="7">Unreproducable</option>
										<option value="8">Wait</option>
									</select>
								</div>
								<div class="field-row defect-severity">
									<label>Defect Severity:</label>
									<select name="defect-severity">
										<option value="1">1 - Catastrophic</option>
										<option value="2">2 - Severe</option>
										<option value="3">3 - Moderate</option>
										<option value="4">4 - Minor</option>
										<option value="5">5 - Cosmetic</option>
										<option value="6">6 - Enhancement</option>
									</select>
								</div>
							</div>
							<div class="field-row user-wrap">
								<p><label>Last updated: </label> <b id="updated">Date, Time</b></p>
								<p><label>Owner: </label> <b id="owner">Account Name</b></p>
							</div>
						</div>
						<div class="field-row close">
							<span class="close">close</span>
						</div>
						<div class="field-row accept">
							<span class="accept">Accept</span>
						</div>
						
						<div class="clear"></div>
					</form>
				</div>
			</div>
			
		</body>
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
		<script type="text/javascript" src="js/generic.js"></script>
		<script type="text/javascript" src="js/workspace.js"></script>
		<script type="text/javascript" src="js/jquery.colorPicker.js"></script>
</html>
